import React, { useRef } from "react";
import PickerPanel from "../components/picker-panel";
import DatePicker from "../components/date-picker";
import useOverlay from "./useOverlay";
import { DatePickerHookProps } from '../../types/uses/useDatePicker'


// !!!: 一定要在页面上添加{overlay.overlayView}
const useDatePicker = () => {
  const overlay = useOverlay();
  const dateValueRef = useRef<Date>();
  const show = function (props: DatePickerHookProps) {
    return overlay.show(
      () => {
        return (
          <PickerPanel
            {...props}
            title={props.title}
            onConfirm={() => {
              overlay.close();
              props.onConfirm &&
                dateValueRef.current &&
                props.onConfirm(dateValueRef.current);
              dateValueRef.current = undefined;
            }}
            onCancel={() => {
              overlay.close();
              props.onCancel && props.onCancel()
            }}
          >
            <DatePicker
              {...props}
              onChange={value => {
                dateValueRef.current = value;
              }}
            />
          </PickerPanel>
        );
      },
      {
        type: "slid-up"
      }
    );
  };
  return { ...overlay, show };
};

export default useDatePicker;
